import { useAutoScroll, useKeydown, useSearchIcon, useSelect } from '@renderer/hooks'
import classNames from 'classnames'
import styles from './styles.module.css'

export function ResultList () {
  const { snippets, activeId, selectItem } = useSelect()
  const { renerSearchIcon } = useSearchIcon(styles.searchIcon)
  const { listRef } = useAutoScroll()

  useKeydown()
  
  if (!snippets.length) return null

  return (
    <div
      ref={listRef}
      className='bg-primary rounded-b-lg p-1'
    >
      {
        snippets.map((item) => {
          return (
            <div
              key={item.id}
              className={classNames('result-item', {
                'result-active-item': activeId === item.id,
              })}
              onClick={() => selectItem(item.id)}
            >
              <span className="icon">{ item.icon && renerSearchIcon(item, item.title) }</span>
              <div className="text-container">
                <span className="content" title={item.content}>{item.content}</span>
                {
                  item.category_id !== 0 && <span className="text-gray-400 title" title={item.title}>{item.title}</span>
                }
              </div>
            </div>
          )
        })
      }
    </div>
  )
}
